<template>
  <page-header-wrapper :title="listNav.label">
    <div slot="content">
      <div v-if="listNav.resources === undefined || listNav.resources.length === 0">
        {{ $t('permission.resource.about') }}
      </div>
      <div v-else>
        <span v-for="(resource, index) in listNav.resources" :key="index">
          <a-button>{{ resource.label }}</a-button>
        </span>
      </div>
    </div>
    <div v-if="listNav.label !== undefined" slot="extraContent">
      <a-button size="small" type="primary" @click="openAddForm">{{ $t('action.add') }}</a-button>
    </div>
    <!-- drawer for add -->
    <a-drawer width="650" :title="$t('permission.resource.form.add')" :visible="addFormVisible" @close="closeAddForm">
      <PermissionResourceAdd :origin="addFormOrigin" @update:submit="submitAddForm" @update:close="closeAddForm" />
    </a-drawer>
    <!-- drawer for edit -->
    <a-drawer width="650" :title="$t('permission.resource.form.edit')" :visible="editFormVisible" @close="closeEditForm">
      <PermissionResourceEdit :origin="editFormOrigin" @update:submit="submitEditForm" @update:close="closeEditForm" />
    </a-drawer>
    <!-- resources list -->
    <div class="table-list">
      <a-table
        rowKey="id"
        :columns="listColumns"
        :data-source="listItems"
        :loading="listLoading"
        :pagination="false"
      >
        <div slot="status" slot-scope="item">
          <div v-if="item.status === 0"><span class="status-disabled"><a-icon type="warning" /> {{ $t('status.disable') }}</span></div>
          <div v-if="item.status === 1"><span class="status-enabled"><a-icon type="check" /> {{ $t('status.enabled') }}</span></div>
        </div>
        <div slot="kind" slot-scope="item">
          <span v-if="item.kind === 1">{{ $t('permission.resource.kind.folder') }}</span>
          <span v-else-if="item.kind === 2">{{ $t('permission.resource.kind.page') }}</span>
          <span v-else-if="item.kind === 3">{{ $t('permission.resource.kind.action') }}</span>
          <span v-else>Error</span>
        </div>
        <div slot="action" slot-scope="item" class="action-list">
          <router-link v-if="item.kind !== 3" :to="{name: 'PermissionsResource', query: { sid: item.application_id, pid: item.id }}">{{ $t('action.level.next') }}</router-link>
          <a-divider type="vertical" />
          <a v-if="item.status === 0" @click="openConfirmEnable(item)">{{ $t('action.enable') }}</a>
          <a v-if="item.status === 1" @click="openConfirmDisable(item)">{{ $t('action.disable') }}</a>
          <a-divider type="vertical" />
          <a @click="openEditForm(item)">{{ $t('action.edit') }}</a>
          <a-divider type="vertical" />
          <a @click="openConfirmDelete(item)">{{ $t('action.delete') }}</a>
        </div>
      </a-table>
    </div>
  </page-header-wrapper>
</template>

<script>
import {
  deletePermissionResource,
  disablePermissionResource,
  enablePermissionResource,
  getPermissionResources, getPermissionResourcesNav
} from '@/api/v1'
import { Modal } from 'ant-design-vue'
import PermissionResourceAdd from './Add'
import PermissionResourceEdit from './Edit'

export default {
  components: { PermissionResourceEdit, PermissionResourceAdd },
  computed: { query () { return this.$route.query } },
  created () { this.resetConditions(); this.loadList() },
  data () {
    return {
      addFormOrigin: { application_id: 0, parent_id: 0, kind: 1, sort: 0, label: '', path: '', permission: '' },
      addFormVisible: false,
      editFormOrigin: { },
      editFormVisible: false,
      listColumns: [
        { key: 'label', title: this.$t('permission.resource.label'), dataIndex: 'label' },
        { key: 'status', title: this.$t('status'), scopedSlots: { customRender: 'status' } },
        { key: 'sort', title: this.$t('sort'), dataIndex: 'sort' },
        { key: 'kind', title: this.$t('permission.resource.kind'), scopedSlots: { customRender: 'kind' } },
        { key: 'permission', title: this.$t('permission.symbol'), dataIndex: 'permission' },
        { key: 'path', title: this.$t('permission.resource.path'), dataIndex: 'path' },
        { key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      listConditions: { sid: 1, pid: 0 },
      listItems: [],
      listLoading: false,
      listNav: {},
      modal: null,
      modalOption: {
        cancelText: this.$t('action.close'),
        centered: true,
        destroyOnClose: true,
        okText: this.$t('action.ok'),
        okType: 'warning',
        parentContext: this
      }
    }
  },
  methods: {
    createModal (opt) {
      if (this.modal !== null) {
        this.modal.destroy()
      }
      this.modal = Modal.confirm(opt)
    },
    async loadList () {
      this.listLoading = true
      this.addFormOrigin.application_id = this.listConditions.sid
      this.addFormOrigin.parent_id = this.listConditions.pid
      // Load navigator.
      getPermissionResourcesNav(this.listConditions, (r) => {
        this.listNav = r.data
        // Load resource list.
        getPermissionResources(this.listConditions, (v) => {
          this.listLoading = false
          this.listItems = v.data
        }, (err) => {
          this.listLoading = false
          this.$message.error(err)
        })
      }, (err) => {
        this.listLoading = false
        this.$message.error(err)
      })
    },

    closeAddForm () { this.addFormVisible = false },
    closeEditForm () { this.editFormVisible = false },

    openAddForm () { this.addFormVisible = true },
    openEditForm (item) { this.editFormOrigin = item; this.editFormVisible = true },

    openConfirmDelete (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.resource.confirm.delete')
      opt.content = this.$t('permission.resource.confirm.delete.message', { label: item.label })
      opt.onOk = () => { this.sendDelete(item) }
      this.createModal(opt)
    },
    openConfirmDisable (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.resource.confirm.disable')
      opt.content = this.$t('permission.resource.confirm.disable.message', { label: item.label })
      opt.onOk = () => { this.sendDisable(item) }
      this.createModal(opt)
    },
    openConfirmEnable (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.resource.confirm.enable')
      opt.content = this.$t('permission.resource.confirm.enable.message', { label: item.label })
      opt.onOk = () => { this.sendEnable(item) }
      this.createModal(opt)
    },

    resetConditions () {
      const q = this.query
      // Use application site id from query string.
      if (q.sid !== null && q.sid !== undefined && q.sid !== '') {
        this.listConditions.sid = q.sid
      }
      // Use application site id from query string.
      if (q.pid !== null && q.pid !== '') {
        this.listConditions.pid = q.pid
      }
    },

    async sendDelete (item) {
      this.listLoading = true
      deletePermissionResource({ id: item.id }, () => {
        this.$message.info(this.$t('permission.resource.confirm.delete.success', { label: item.label }))
        this.listLoading = false
        this.loadList()
      }, (err) => {
        this.listLoading = false
        this.$message.error(err)
      })
    },
    async sendDisable (item) {
      this.listLoading = true
      disablePermissionResource({ id: item.id }, () => {
        this.$message.info(this.$t('permission.resource.confirm.disable.success', { label: item.label }))
        this.listLoading = false
        this.loadList()
      }, (err) => {
        this.listLoading = false
        this.$message.error(err)
      })
    },
    async sendEnable (item) {
      this.listLoading = true
      enablePermissionResource({ id: item.id }, () => {
        this.$message.info(this.$t('permission.resource.confirm.enable.success', { label: item.label }))
        this.listLoading = false
        this.loadList()
      }, (err) => {
        this.listLoading = false
        this.$message.error('' + err)
      })
    },

    submitAddForm () {
      this.closeAddForm()
      this.loadList()
    },
    submitEditForm () {
      this.closeEditForm()
      this.loadList()
    }
  },
  watch: {
    query: {
      handler () { this.resetConditions(); this.loadList() }
    }
  }
}
</script>
